<template>
	<view class="container">
		<view class="order-user-info">
			<view class="top">
				<u-icon size="25" name="map"></u-icon>
				<view class="user-info">
					<text class="name">张三</text>
					<text class="phone">18212345678</text>
				</view>
				<u-button :customStyle="{
					'flex': '.1',
					'height': '25px'
				}" type="primary" plain shape="circle" text="修改" @click="update"></u-button>
			</view>
			<text class="location">福建省龙岩市新罗区龙岩学院</text>
		</view>

		<view class="order-shop-info">
			<image mode="widthFix" src="/static/logo.png"></image>
			<view class="shop">
				<text>2寸，塑封</text>
				<text>尺寸：2寸 相纸：塑封</text>
			</view>
			<view class="info">
				<text>0.28</text>
				<text>x1</text>
			</view>
		</view>

		<view class="order-details">
			<view class="detail">
				<text>配送服务</text>
				<text>快递 | 免邮</text>
			</view>
			<view class="detail">
				<text>订单备注</text>
				<text>无备注 ></text>
			</view>
		</view>

		<view class="submit">
			<view class="counter">
				共1件 合计：￥0.28
			</view>

			<view class="buy">
				<u-button type="warning" :hairline="true" shape text="提交订单" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			update() {
				uni.navigateTo({
					url: '/Self-rinse/rinse/update'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0 15px;
		font-size: 14px;

		.order-user-info {
			display: flex;
			flex-direction: column;
			padding: 10px;
			background-color: white;
			border-radius: 10px;
			font-size: 13px;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				::v-deep .u-icon {
					flex: 0.1 !important;
				}

				.user-info {
					line-height: 39px;
					flex: .8;

					.name {
						font-size: 16px;
						font-weight: bold;
					}

					.phone {
						padding-left: 5px;
					}
				}
			}

			.location {
				margin-left: 30px;
			}
		}

		.order-shop-info {
			display: flex;
			align-items: center;
			padding: 10px;
			justify-content: space-around;
			margin-top: 15rpx;
			border-radius: 10px;
			background-color: white;

			image {
				width: 70px;
			}

			.shop {
				display: flex;
				flex-direction: column;
				flex: .9;
			}

			.info {
				display: flex;
				flex-direction: column;
			}
		}

		.order-details {
			padding: 10px;
			margin-top: 15rpx;
			border-radius: 10px;
			background-color: white;

			.detail {
				display: flex;
				padding: 5px 0;
				justify-content: space-between;
			}
		}

		.submit {
			padding: 10px;
			text-align: end;

			.counter {
				padding: 5px 0;
			}

			.buy {
				width: 100px;
				float: right;
			}
		}
	}
</style>